<script setup>
import { ref, reactive, onMounted, watch, h } from 'vue';
import { spaceApi as MainApi, spaceById as MainById } from '@T2/service/api.ts';
import { ElMessage, ElMessageBox } from 'element-plus';
import SpaceFloor from '@T2/views/Project/Manage/components/tree/spaceFloor.vue';

onMounted(() => {
  
});
const MainTable = reactive({
  data: [],
  total: 0,
});
const Filter = reactive({
  page: 1,
  pagesize: 30,
  search: '',
  parent: null,
});
watch(() => ({...Filter}), (nv, ov) => {
  if (nv.page === 1 || nv.page !== ov.page) {
    GetMainTable();
  } else {
    Filter.page = 1;
  }
});
const spaceChange = (data, node) => {
  Filter.parent = node.data.id || null;
}
const GetMainTable = () => {
  MainApi({
    method: 'get',
    params: {
      ...Filter,
      type: '房间',
    }
  }).then(res => {
    MainTable.data = res?.results || [];
    MainTable.total = res?.count || 0;
  });
}
</script>

<template>
  <div class="view flex">
    <div class="spaceFloor flex-column">
      <SpaceFloor @current-change="spaceChange" />
    </div>
    <div class="space-box">
      <div class="flex-column mainCard">
        <el-form label-width="120px" class="flex t_form">
          <el-form-item label="名称查询：">
            <el-input v-model="Filter.search" clearable></el-input>
          </el-form-item>
        </el-form>
        <el-table :data="MainTable.data" scrollbar-always-on>
          <el-table-column label="房间编号" prop="name" min-width="210px" fixed="left" show-overflow-tooltip></el-table-column>
          <el-table-column label="房间地址" prop="address" min-width="140px"></el-table-column>
          <el-table-column label="r_id" prop="r_id" min-width="180px"></el-table-column>
        </el-table>
        <el-pagination
          layout="->, total, prev, pager, next, sizes"
          background
          :page-sizes="[10, 20, 30, 50, 100]"
          :pager-count="5"
          v-model:currentPage="Filter.page"
          v-model:page-size="Filter.pagesize"
          :total="MainTable.total"
        />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@use '@T2/styles/normal.scss';
.view {
  width: 100%;
  height: 100%;
}
.spaceFloor {
  width: 220px;
  height: calc(100% - 20px);
  background: #FFFFFF;
  box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.15);
  border-radius: 10px;
  margin: 10px;
  padding: 20px;
}
.space-box {
  flex: 1;
  overflow: hidden;
  position: relative;
}
</style>